<template>
  <div class="width-100-percent flex-row-center">
    <div class="width-80-percent flex-row-between">
      <transition-group appear
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__backInLeft"
                        leave-active-class="animate__backOutRight">
        <h2 v-show="isShow" key="1">动画效果1</h2>
        <h2 v-show="!isShow" key="2">动画效果2</h2>
      </transition-group>
      <el-button @click="isShow=!isShow"></el-button>
    </div>
  </div>

</template>

<script lang="ts" setup>
import {ref} from "vue";

let isShow=ref(true)

// import emoji from './emoji'


</script>

<style scoped lang="less">

</style>